<!DOCTYPE html>
<html class="x-admin-sm" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/static/backstage/css/font.css">
    <link rel="stylesheet" href="/static/backstage/css/xadmin.css">
    <script type="text/javascript" src="/static/backstage/lib/layui/layui.js"></script>
    <script type="text/javascript" src="/static/backstage/js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">

        <form class="layui-form" th:action="@{/car}" method="post">

            <div class="layui-form-item">
                <label  class="layui-form-label">
                    <span class="x-red">*</span>品牌
                </label>
                <div class="layui-input-inline">
                    <select  name="seriesBrandid" id="brandSelect" lay-filter="quiz1">
                        <option th:value='0'>---请选择品牌---</option>
                        <option th:each="brand: ${brandList}" th:value="${brand.brandId}" th:text="${brand.brandName}">1</option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>

            <div class="layui-form-item">
                <label  class="layui-form-label">
                    <span class="x-red">*</span>类型
                </label>
                <div class="layui-input-inline">
                    <select  name="seriesCartypeid" id="carTypeSelect" lay-filter="quiz3">
                        <option th:value='0'>---请选择类型---</option>
                        <option th:each="carType: ${carTypeList}" th:value="${carType.cartypeId}" th:text="${carType.cartypeName}">1</option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>系列
                </label>
                <div class="layui-input-inline">
                    <select  name="modelSeriesid" id="seriesSelect" lay-filter="quiz2">
                        <option th:value='0'>---请选择系列---</option>
                        <option th:each="series: ${seriesList}" th:value="${series.seriesId}" th:text="${series.seriesName}">1</option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>中英文均可
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>型号
                </label>
                <div class="layui-input-inline">
                    <select  name="carModelid" id="carModelSelect" lay-filter="quiz4">
                        <option th:value='0'>---请选择型号---</option>
                        <option th:each="carModel: ${carModelList}" th:value="${carModel.modelId}" th:text="${carModel.modelName}">1</option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="carVendor" class="layui-form-label">
                    <span class="x-red">*</span>厂商
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="carVendor" name="carVendor" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="carEnergyType" class="layui-form-label">
                    <span class="x-red">*</span>能源类型
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="carEnergyType" name="carEnergyType" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>【汽油、电动等】
                </div>
            </div>
            <div class="layui-form-item">
                <label for="carEmissionStandard" class="layui-form-label">
                    <span class="x-red">*</span>排放标准
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="carEmissionStandard" name="carEmissionStandard" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>【例：国VI】
                </div>
            </div>
            <div class="layui-form-item">
                <label for="carMarketTime" class="layui-form-label">
                    <span class="x-red">*</span>上市时间
                </label>
                <div class="layui-input-inline">
                    <input type="date" id="carMarketTime" name="carMarketTime" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>精确到年月即可
                </div>
            </div>
            <div class="layui-form-item">
                <label for="carMaxPower" class="layui-form-label">
                    <span class="x-red">*</span>最大功率
                </label>
                <div class="layui-input-inline">
                    <input type="number" id="carMaxPower" name="carMaxPower" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>KW
                </div>
            </div>
            <div class="layui-form-item">
                <label for="carMaxTorque" class="layui-form-label">
                    <span class="x-red">*</span>最大扭矩
                </label>
                <div class="layui-input-inline">
                    <input type="number" id="carMaxTorque" name="carMaxTorque" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>N·m
                </div>
            </div>
            <div class="layui-form-item">
                <label for="carMaxSpeed" class="layui-form-label">
                    <span class="x-red">*</span>最高车速
                </label>
                <div class="layui-input-inline">
                    <input type="number" id="carMaxSpeed" name="carMaxSpeed" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>KM/h
                </div>
            </div>
            <div class="layui-form-item">
                <label for="carFuelConsumption" class="layui-form-label">
                    <span class="x-red">*</span>油耗
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="carFuelConsumption" name="carFuelConsumption" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>L/100KM
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <button type="submit" class="layui-btn" lay-filter="add">
                    添加
                </button>
            </div>
        </form>

    </div>
</div>
<script src="/static/assets/js/jquery.min.js" th:src="@{/static/assets/js/jquery.min.js}"></script>
<script>
    //  类型ID
    var cId;
    //  品牌ID
    var bId;
    //  系列ID
    var sId;

    layui.use(['form', 'layer'],
    function () {
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer;

        //自定义验证规则
        form.verify({
            nikename: function (value) {
                if (value.length < 5) {
                    return '昵称至少得5个字符啊';
                }
            },
            pass: [/(.+){6,12}$/, '密码必须6到12位'],
            repass: function (value) {
                if ($('#L_pass').val() != $('#L_repass').val()) {
                    return '两次密码不一致';
                }
            }
        });

        //监听提交
        form.on('submit(add)',
            function (data) {
                console.log(data);
                //发异步，把数据提交给php
                layer.alert("增加成功", {
                        icon: 6
                    },
                    function () {
                        //关闭当前frame
                        xadmin.close();

                        // 可以对父窗口进行刷新
                        xadmin.father_reload();
                    });
                return false;
            });

        //  选择系列，刷新型号的下拉框
        form.on('select(quiz2)', function (data) {

            sId = data.value;// 型号id
            console.log("sId（系列ID）：" + sId);

            $.ajax({
                type: "POST",
                url:"/carModels",
                contentType: "application/json",
                data:JSON.stringify({seriesId:sId}),
                success:function (result) {
                    $("#carModelSelect").empty();
                    $("#carModelSelect").append("<option th:value='0'>---请选择型号---</option>");
                    for(var i = 0; i< result.detail.length;i++){
                        $("#carModelSelect").append("<option value='" + result.detail[i].modelId + "'>" + result.detail[i].modelName + "</option>");
                    }
                    form.render('select');
                }
            });
        });


        //  选择类型，刷新系列的下拉框
        form.on('select(quiz3)', function (data) {

            cId = data.value;// 一级列表的id
            console.log("cId：" + cId);

            $.ajax({
                type: "POST",
                url:"/seriess",
                contentType: "application/json",
                data:JSON.stringify({brandId:bId, carTypeId:cId}),
                success:function (result) {
                    //  清除系列的下拉框
                    $("#seriesSelect").empty();
                    $("#seriesSelect").append("<option th:value='0'>---请选择车系---</option>");
                    //  填充新的内容系列的下拉框
                    for(var i = 0; i< result.detail.length;i++){
                        $("#seriesSelect").append("<option value='" + result.detail[i].seriesId + "'>" + result.detail[i].seriesName + "</option>");
                    }
                    //  更新选中的系列（ID）
                    sId = 0;
                    form.render('select');//  注意：数据赋值完成之后必须调用该方法，进行layui的渲染，否则数据出不来
                }
            });
        });

        //  选择品牌，刷新系列的下拉框
        form.on('select(quiz1)', function (data) {

            bId = data.value;// 一级列表的id
            console.log("bId：" + bId);

            $.ajax({
                type: "POST",
                url:"/seriess",
                contentType: "application/json",
                data:JSON.stringify({brandId:bId, carTypeId:cId}),

                // data:{"brandId":pId,"carTypeId":cId},

                success:function (result) {
                    $("#seriesSelect").empty();
                    $("#seriesSelect").append("<option th:value='0'>---请选择车系---</option>");

                    // console.log(result.detail);
                    for(var i = 0; i< result.detail.length;i++){
                        $("#seriesSelect").append("<option value='" + result.detail[i].seriesId + "'>" + result.detail[i].seriesName + "</option>");
                        console.log("ID：" + result.detail[i].seriesId + "Name：" + result.detail[i].seriesName);
                    }
                    //  更新选中的系列（ID）
                    sId = 0;
                    form.render('select');//  注意：数据赋值完成之后必须调用该方法，进行layui的渲染，否则数据出不来
                }
            });

        });

    });
</script>
<script>
    var _hmt = _hmt || [];
(function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();
</script>
</body>

</html>
